import React, { FC, useState } from 'react'
import MyTitle from '../../components/Title'
import { Row ,Col, Steps, Button,Form  , Input,Cascader, message  } from 'antd';
import { advicecatetory } from '../../utils';
import RichEditorFunc from './RichEditor';
import { ajax } from './../../api/index';
import { inject, observer } from 'mobx-react';
import { useNavigate } from 'react-router-dom';


const { Step } = Steps;

const  AdviseAdd:FC<any> = ({
  uinfo
})=> {
  const steps = [
    {
      title:"添加意见基本信息",
      description:"谢谢你的意见"
    },
    {
      title:"请完成意见的详细内容",
      description:"请你认真填写哦"
    },
    {
      title:"请提交你的宝贵意见",
      description:"欢迎再次提交"
    }
  ]
  const {userInfo} = uinfo;
  let [current,setCurrent] = useState<number>(0)
  const [obj,setObj] = useState<any>(null)
  const [content,setContent] = useState<any>(null)
  const navigate = useNavigate()
  const next = ()=>{
    if(current==0){
      form.validateFields()
      .then(value=>{
        console.log(value)
        setObj(value)
        setCurrent(current+1)
      })
      .catch(err=>{
        message.error("请添加意见基本信息")
      })
    }else if(current==1){
      if(content){
        setCurrent(current+1)
      }else{
        message.error("请添加意见主要内容")
      }
      
    }
  }
  const prev = ()=>{
    setCurrent(current-1)
  }

  const getContent=(content:any)=>{
    console.log(content)
    setContent(content)
  }
  const [form] = Form.useForm()
  const submitAdvise = async ()=>{
    console.log(content)
    console.log(obj)
    // let value:any  = {}
    // value.uinfo = userInfo;
    let {code,result} = await ajax.addadvise({
        info:userInfo,
        content,
        ...obj
    })
    if(code==200){
      navigate('/main/advise/list')
    }

  }
  return (
      <div>
        <MyTitle text="添加我的个人意见"/>
        <Row>
          <Col span={24}>
              <Steps current={current}>
                  {
                    steps.map((l,i)=>{
                      return <Step  key={i}  title={l.title} description={l.description} />
                    })
                  }
              </Steps>
          </Col>
        </Row>
        <Row style={{marginTop:25,minHeight:360}}>
            {
              current==0 &&<Col span={9}>
                  <Form
                      name="normal_login"
                      className="myform"
                      form={form}
                      layout={"vertical"}
                  >
                      <Form.Item
                          name="title"
                          label="意见标题"
                          rules={[{ required: true, message: '请输入意见标题' }]}
                      >
                        <Input  placeholder="意见标题" />
                    </Form.Item>
                    <Form.Item 
                      name="category"
                      label="意见类别"
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <Cascader options={advicecatetory}  placeholder="请选择" />
                    </Form.Item>
                  </Form>
              </Col>
            }
            {
              current==1 && <Col span={22}>
                <RichEditorFunc 
                  getContent={getContent}
                  content={content}
                />
              </Col>
            }
            {
              current==2 && <Col>
                <Button danger onClick={submitAdvise} >提交意见</Button>
              </Col>
            }
        </Row>
        <Row>
          {
            current!=steps.length-1 &&   <Button onClick={next} type="primary" style={{marginRight:10}}>
                下一步
              </Button>
          }
          {
            current!=0 && <Button onClick={prev } danger>
                上一步 
            </Button>
          }
         
          
        </Row>
      </div>

  )
}

export default inject('uinfo')(observer(AdviseAdd)) 